<template>
  <van-field readonly clickable name="upload-image" :value="value" :label="label"
    :rules="rules" :required="required === undefined ? false : true" class="upload-image">
    <template #input>
      <div class="van-uploader">
        <div class="van-uploader__wrapper">
          <div class="van-uploader__upload" @click="seleImage">
            <div v-if="value" style="width: 100%; height: 100%;" :style="`background: url(${ value }) center center / cover no-repeat;`"></div>
            <i v-else class="van-icon van-icon-plus van-uploader__upload-icon"></i>
          </div>
          <div class="error-text">请上传图片！</div>
        </div>
      </div>
    </template>
  </van-field>
</template>

<script>
export default {
  props: ['label', 'value', 'required', 'rules'],
  data() {
    return {
    }
  },
  methods: {
    seleImage() {
      this.$tool.seleImg().then(res => {
        this.$emit('input', res);
      });
    }
  },
  mounted() {
  }
}
</script>

<style lang="less">
.upload-image {
  .error-text {
    display: none;
  }
  &.van-field--error {
    .error-text {
      display: block;
    }
  }
  .van-uploader__wrapper {
    display: block;
  }
}
</style>